.login { 
    width: 29%;
    position: absolute; 
    left: 810px;
    top: 200px;
    padding: 8px;
    margin: 18px auto;
}

body{
    background: url("/PPIGYM-war/resources/imagenes/Logo.jpg") ;
    background-size: 100%;
}
.ui-widget-header {
    border: 1px solid #bed6f8;
    background:url("/PPIGYM-war/resources/imagenes/Logo.jpg") repeat-x ;
    color: #ffffff;
    font-weight: bold;
}
.ui-widget {
    font-family: "Segoe UI", Verdana, Arial, sans-serif;
    font-size:17px;

}
.letra{
    font-family: "Segoe UI", Verdana, Arial, sans-serif;
    color: black;
}
.boton{
    font-family: "Segoe UI", Verdana, Arial, sans-serif;
    color: black;
    font-weight:bold;
    left: 30%;
    margin: 5%;
}
.buttonmain{
  background:#e5e5e5;
  display:inline-block;
  margin:0 6px;
  padding:7px 20px 7px;
  color:#333;
  font:400 14px 'Droid Sans';
  text-decoration:none;
  text-shadow: 0 1px 1px #FFF;
  border:1px solid #ccc;

  /* Bordes redondenados - Border Radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;

  /* Fondo Degradado - Background Gradient */
  background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
  background:   -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
  background:    -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
  background:        linear-gradient(top, #fefefe, #e5e5e5); 
  
  /* Aplcamos sombras al boton - Box Shadow */
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

  /* Animacion - Transition */
  -webkit-transition: all ease-in-out .3s;
  -moz-transition: all ease-in-out .3s;
  transition: all ease-in-out .3s;
}
.buttonmain:hover{
  border-color:#eb921d; /* Modificamos el color del borde */

  /* Cambiamos los colores del fondo degradado */
  background:-webkit-linear-gradient(top, #fefefe, #f1f1f1); /* Chrome 10+ */
  background:   -moz-linear-gradient(top, #fefefe, #f1f1f1); /* Firefox 3.6+ */
  background:    -ms-linear-gradient(top, #fefefe, #f1f1f1); /* IE10 */
  background:        linear-gradient(top, #fefefe, #f1f1f1);
  
  /* Modificamos las propiedades del Box Shadow para un efecto Glow */
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 6px rgba(36, 168, 229, .3);
  -moz-box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
  box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
}
.recuperar{
    font-family: "Segoe UI", Verdana, Arial, sans-serif;
    color: orange;
    font-weight:bold;
    top: 200px;
    padding: 8px;
    height: 10%;
    margin: 18px auto;
}
.botonListar{
   left: 20%;
   top: 534%; 
   position: absolute;
}

   #button {
  color: white;
   }
